<template>
  <div >
    <h2>外部链接</h2>
    <div class="container">
      <ul>
        <!-- 循环渲染链接列表 -->
        <li v-for="link in linkList" :key="link.name">
          <a :href="link.url" target="_blank">{{ link.name }}</a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 定义链接列表数组，每个元素包含名称和地址属性
const linkList = ref([
  { name: 'Docker快速入门', url: 'https://docker.easydoc.net/' },
  { name: 'Tauri官网', url: 'https://tauri.app/' },
  { name: 'Vue官网', url: 'https://vuejs.org/' },
]);
</script>

<style scoped lang="scss">
  @use "../assets/common.scss";
 .container {
    margin: 20px; // 水平方向自动居中，使整体布局更规整
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    padding: 15px;
    background-color: white; // 白色背景，突出内容区域

    ul {
      list-style-type: none;
      padding: 0;
      display: flex; // 使用flex布局，方便灵活排列链接项
      flex-wrap: wrap; // 链接项超出一行时自动换行

      li {
        margin-bottom: 10px;
        width: calc(50% - 80px); // 让每个链接项宽度占三分之一空间（减去间距），一行显示三个（可根据需求调整比例）
        margin: 15px; // 统一设置链接项的外边距，使布局更规整
        padding: 15px;
        background-color: #f9f9f9; // 每个链接项设置浅灰色背景，增强区分度
        border-radius: 5px; // 圆角边框，使外观更柔和
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.05); // 淡淡的阴影，增加立体感
        transition: transform 0.2s ease; // 添加鼠标悬停时的缩放动画过渡效果
        display: block;

        &:hover {
          transform: scale(1.02); // 鼠标悬停时链接项放大1.05倍，增强交互感
        }

        a {
          text-decoration: none; // 去除链接默认的下划线
          color: #007bff; // 链接文本颜色设为蓝色，凸显可点击性
          font-size: 16px; // 适当设置字体大小
          display: block; // 让链接占满整个li元素空间，方便点击操作
          transition: color 0.3s ease; // 鼠标悬停时颜色过渡效果，增强交互感
          &:hover {
            color: #0056b3; // 鼠标悬停时链接颜色加深，提示用户可点击
          }
        }
      }
    }
  }

</style>